{extend name="base"/}
{block name="resources"}
<style>
    .ns-card-head-right {
        display: flex;
        align-items: center;
    }

    .ns-card-head-right .layui-form-item {
        margin-bottom: 0;
    }

    .current-time, .ns-flow-time-today {
        margin-left: 10px;
        line-height: 34px;
    }

    /* 基本信息 */
    .ns-basic {
        display: flex;
    }

    .ns-basic .ns-table-tuwen-box {
        width: 30%;
        border-right: 1px solid #EEEEEE;
        padding: 10px 20px;
    }

    .ns-basic-count {
        font-size: 20px;
        font-weight: 600;
    }

    .ns-survey-info {
        margin: 0;
    }

    .ns-survey-info .layui-card-body {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-con {
        display: inline-block;
        width: calc((100% - 90px) / 2);
        margin-right: 30px;
        margin-bottom: 30px;
        background-color: #FFF;
        box-sizing: border-box;
        position: relative;
        border:1px #F3F3F3 solid;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-con:last-child {
        margin-right: 0;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-aco {
        font-size: 16px;
        line-height: 18px;
        margin-top: 20px;
        font-weight: 400;
        padding: 0 20px;
    }

    .ns-survey-info .layui-card-body .ns-survey-detail-num {
        margin: 10px 0;
        font-size: 36px;
        font-weight: 400;
        margin-top: 48px;
    }

    .ns-survey-detail-rate {
        font-size: 14px;
        line-height: 30px;
        display: flex;
        align-items: center;
        margin-top: 25px;
    }

    .ns-survey-detail-rate div i {
        margin-left: 5px;
    }

    .ns-survey-detail-rate div:nth-child(2) {
        margin-left: 25px;
    }

    .layui-icon-triangle-d {
        font-size: 12px;
        display: inline-block;
        transform: scale(0.8, 0.9);
        -webkit-transform: scale(0.8, 0.9);  /*兼容-webkit-引擎浏览器*/
        -moz-transform: scale(0.8, 0.9);     /*兼容-moz-引擎浏览器*/
        color: #5ED300;
    }

    .layui-icon-increase {
        transform: scale(0.8, 0.9) rotate(180deg);
        -ms-transform: rotate(180deg); 	/* IE 9 */
        -moz-transform: scale(0.8, 0.9) rotate(180deg); 	/* Firefox */
        -webkit-transform: scale(0.8, 0.9) rotate(180deg); /* Safari 和 Chrome */
        -o-transform: rotate(180deg); 	/* Opera */
    }

    .layui-icon-triangle-d.is-null {
        display: none;
    }

    .ns-survey-detail-split {
        width: 100%;
        height: 1px;
        background-color: #FFFFFF;
    }

    .ns-survey-detail-total {
        display: flex;
        justify-content: space-between;
        margin: 18px 0 15px;
        font-size: 14px;
        line-height: 16px;
    }

    .ns-prompt-block {
        position: absolute;
        top: 18px;
        right: 20px;
        font-size: 12px;
        cursor: pointer;
    }

    .ns-prompt-block .ns-prompt {
        width: auto;
        height: auto;
        line-height: unset;
    }

    .ns-prompt-block .ns-prompt-box {
        top: 40px;
        left: -53px;
        width: 150px;
        text-align: center;
    }

    .ns-prompt-block .ns-prompt-box:before, .ns-prompt-block .ns-prompt-box:after {
        left: 62px;
        top: unset;
    }

    .ns-prompt-block .ns-prompt-box:before {
        border-bottom-color: #e4e4e4;
        border-right-color: transparent;
        top: -25px;
    }

    .ns-prompt-block .ns-prompt-box:after {
        border-bottom-color: #FFFFFF;
        border-right-color: transparent;
        top: -23px;
    }

    .ns-survey-yesterday-btn {
        font-size: 12px;
        width: 44px;
        height: 22px;
        padding: 0;
        line-height: 22px;
    }

    /* .ns-survey-info .layui-card-body .ns-survey-detail-yesterday {
        font-size: 14px;
        font-weight: 400;
        color: rgba(175, 175, 175, 1);
    } */

    /*  */
    .ns-survey-right .layui-card {
        border: 1px solid #f1f1f1;
        box-shadow: inherit;
    }

    .ns-survey-right .layui-card .layui-card-body {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ns-shop-state {
        margin: 30px 40px 0;
        padding: 10px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 35px;
        background-color: rgba(255, 129, 67, 0.1);
        color: #fff;
        border: 1px solid red;
    }

    .ns-shop-state p {
        color: #666;
    }

    .ns-shop-state p i {
        margin-right: 6px;
    }

    .ns-shop-state button {
        border: none;
        background-color: transparent;
        cursor: pointer;
    }



    .statistics-wrap {
        display: flex;
    }

    .statistics-wrap .item{
        display: inline-block;
        width: calc((100% - 90px) / 4);
        margin-right: 30px;
        margin-bottom: 30px;
        display: flex;
    }

    .statistics-wrap .item:last-child{
        margin-right: 0;
    }

    .statistics-wrap .item .flex-box {
        flex: 1;
        background: #f5f5f5;
        height: 120px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        cursor: pointer;
    }

    .statistics-wrap .item .flex-box:first-child {
        margin-right: 30px;
    }

    .statistics-wrap .flex-box .title{
        font-size: 14px;
    }

    .statistics-wrap .flex-box .num{
        font-size: 28px;
        font-weight: 400;
        color: #4685FD;
        margin-top: 10px;
    }
    .modelBox {
        background-color: #f5f5f5;
        padding: 20px;
        padding-bottom: 10px;
        width: 340px;
        box-sizing: box-sizing;
        margin-right: 10px;
    }
    .modelBox .titleA {
        font-weight: 600;
        color: #818181 !important;
        padding-bottom: 10px;
    }
    .newinfo {
        width: 340px;
        display:flex;
        justify-content:space-between;
        align-items:end;
        margin-top: 10px;
    }
   .newinfo .newinfoA {
       color:#837f7b;
       font-size:13px;
       line-height:13px;

   }
   .newinfo .newinfoB {
       font-weight:600;
       font-size:28px;
       color:#262626;
       width: 35%;
       line-height:24px;
       text-align: right;
       margin-top: 4px;
   }
   .newinfoC {
       display:flex;
       width: 35%;
       color:#21201f;
       font-size:13px;
       line-height:13px;
       height: 13px;
       text-align: right;
   }
</style>

{/block}
{block name="main"}

<div>
    <h2 style="padding: 10px;font-weight: 600;color: #333;">平台统计</h2>
</div>

<div class="layui-card ns-survey-info ns-card-common" style="display:flex">

    <div class="modelBox">
        <div class="titleA">会员总数</div>
        <div class="newinfo">
            <span class="newinfoA">会员总数</span>
            <span class="newinfoB">{$total_member_count}</span>
            <span class="newinfoA" style="margin-left:6px">个</span>
            <div class="newinfoC"></div>
        </div>
        <div class="newinfo">
            <span class="newinfoA">消费总额</span>
            <span class="newinfoB">{$hotel_order_money}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC"></div>
        </div>
    </div>

     <div class="modelBox">
        <div class="titleA">新增会员</div>

        <div class="newinfo">
            <span class="newinfoA">新增会员</span>
            <span class="newinfoB">{$today_member_count}</span>
            <span class="newinfoA" style="margin-left:6px">个</span>
            <div class="newinfoC">
             环比
                 {php}
                    $t = $today_member_count;
                    $y = $yesterday_member_count;
                {/php}
                {$t > $y ? '+' : ''}{$member_count}
                 {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
        </div>
        </div>
    </div>


      <div class="modelBox">
        <div class="titleA">余额</div>
        <div class="newinfo">
            <span class="newinfoA">充值余额</span>
            <span class="newinfoB">{$today_recharge_order_total}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
            环比
                {php}
                $t = $today_recharge_order_total;
                $y = $yesterday_recharge_order_total;
                {/php}
                {$t > $y ? '+' : ''}{$day_rate.recharge_order_total}
                 {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
        </div>
        </div>

         <div class="newinfo">
            <span class="newinfoA">使用余额</span>
            <span class="newinfoB">{$today_money}</span>
            <span class="newinfoA" style="margin-left:6px">元</span>
            <div class="newinfoC">
            环比
                {php}
                $t = $today_money;
                $y = $yesterday_money;
                {/php}
                {$t > $y ? '+' : ''}{$balance_money_total}
            {if condition="$t > $y"}
                <span style="color:#29ab85;margin-left:20px;font-weight:600">↑</span>
                {else/}
                <span style="color:red;margin-left:20px;font-weight:600">↓</span>
                {/if}
        </div>
        </div>

    </div>


</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">会员相关占比</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_member_chart">
<!--                        <option value="0">今日实时</option>-->
                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member"></span>
        </div>
    </div>
    <div class="layui-card-body">

        <div id="member_main" style="width: 33.3%; height: 400px;float: left;"></div>
        <div id="member_main2" style="width: 33.3%; height: 400px;float: left;"></div>
        <div id="member_main3" style="width: 33.3%; height: 400px;float: left;"></div>
    </div>
</div>


<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">会员趋势分析</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_chart">
<!--                        <option value="1">近7天</option>-->
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="main" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">会员类型走势</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_member_type_chart">

                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member-type"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="member_type_main" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">会员消费走势(余额)</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_member_type_balance_chart">

                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member-type-balance"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="member_type_money_main" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<div class="layui-card ns-card-common ns-card-brief">
    <div class="layui-card-header">
        <span class="ns-card-title">会员消费走势(积分)</span>

        <div class="ns-card-head-right layui-form">
            <div class="layui-form-item">
                <div class="layui-input-block ns-len-mid">
                    <select name="date" lay-filter="date_member_type_point_chart">

                        <option value="1">近7天</option>
                        <option value="2">近30天</option>
                    </select>
                </div>
            </div>
            <span class="current-time-member-type-point"></span>
        </div>
    </div>
    <div class="layui-card-body">
        <div id="member_type_point_main" style="width: 100%; height: 400px;"></div>
    </div>
</div>

<div class="layui-row layui-col-space10">
    <div class="system-function system_box" style="width: 48%;float: left;">
        <blockquote class="layui-elem-quote">会员登录TOP10</blockquote>
        <table class="layui-table">
            <colgroup>
                <col width="20%">
                <col width="30%">
                <col width="20%">
                <col width="20%">
                <col width="10%">
            </colgroup>
            <tbody>
            <tr>
                <td>会员名称</td>
                <td>手机号码</td>
                <td>会员类型</td>
                <td>登录次数</td>
                <td>排名</td>
            </tr>
            {foreach $login_num_member_list as $k => $v}
                <tr>
                    <td>{$v.nickname}</td>
                    <td>{$v.mobile}</td>
                    <td>
                        {if $v.member_card_type==1}
                        个人会员
                        {elseif $v.member_card_type==2}
                        门店会员
                        {elseif $v.member_card_type==3}
                        员工会员
                        {else/}
                        普通用户
                        {/if}
                    </td>
                    <td>{$v.login_num}</td>
                    <td>{$k+1}</td>
                </tr>
            {/foreach}
            </tbody>
        </table>
    </div>
    <div class="system-function system_box" style="width: 48%;float: left;">
        <blockquote class="layui-elem-quote">积分TOP10</blockquote>
        <table class="layui-table">
            <colgroup>
                <col width="20%">
                <col width="30%">
                <col width="20%">
                <col width="20%">
                <col width="10%">
            </colgroup>
            <tbody>
            <tr>
                <td>会员名称</td>
                <td>手机号码</td>
                <td>会员类型</td>
                <td>剩余积分</td>
                <td>排名</td>
            </tr>
            {foreach $point_member_list as $k => $v}
            <tr>
                <td>{$v.nickname}</td>
                <td>{$v.mobile}</td>
                <td>
                    {if $v.member_card_type==1}
                    个人会员
                    {elseif $v.member_card_type==2}
                    门店会员
                    {elseif $v.member_card_type==3}
                    员工会员
                    {else/}
                    普通用户
                    {/if}
                </td>
                <td>{$v.point}</td>
                <td>{$k+1}</td>
            </tr>
            {/foreach}

            </tbody>
        </table>
    </div>
</div>
{/block}
{block name="script"}
<script src="ADMIN_JS/echarts.min.js"></script>
<script>
    $(function() {
        getMemberStat(0);
        getMemberStatChart(2);
        getMemberAnnularRingStatChart(1);
        getMemberTypeConsumeBalanceStatChart(1);
        getMemberTypeConsumePointStatChart(1);
        getMemberTypeStatChart(1);
    });

    layui.use(['form'], function() {
        var form = layui.form;

        /**
         * 监听下拉框
         */
        form.on('select(date)', function(data) {
            getMemberStat(data.value);
        });

        form.on('select(date_member_type_chart)', function(data) {
            getMemberTypeStatChart(data.value);
        });

        /**
         * 图表监听下拉框
         */
        form.on('select(date_chart)', function(data) {
            getMemberStatChart(data.value);
        });

        form.on('select(date_member_chart)', function(data) {
            getMemberAnnularRingStatChart(data.value);
        });

        form.on('select(date_member_type_balance_chart)', function(data) {
            getMemberTypeConsumeBalanceStatChart(data.value);
        });

        form.on('select(date_member_type_point_chart)', function(data) {
            getMemberTypeConsumePointStatChart(data.value);
        });
    });



    //获取店铺统计
    function getMemberStat(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/member"),
            data: {
                date_type: date_type
            },
            success: function(res){
                if (res.code == 0) {
                    $("#memberCount").html(res.data.member_count);
                    $(".ns-flow-time-today").html(res.data.time_range);
                }else{
                    layer.msg(res.message);
                }
            }
        });
    }

    //获取店铺统计图表
    function getMemberStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/getmemberstatlist"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option.xAxis.data = res.time;
                option.series[0].data = res.member_count;
                $(".current-time").html(res.time_range);
                myChart.setOption(option);
            }
        });
    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增会员']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 个'
            }
        },
        color:['#f89c09'],
        series: [
            {
                name: '新增会员',
                type: 'bar',
                data: [],
            }
        ]
    };
    // 指定图表的配置项和数据
    /*option = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['新增会员']
        },
        color:[
            '#f89c09'
        ],

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 人'
            }
        },
        series: [{
            name: '新增会员',
            type: 'bar',
            data: [],
        },
        ]
    };*/

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

    //环形图-会员占比
    //获取店铺统计图表
    function getMemberAnnularRingStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/getmemberannularringstatlist"),
            data: {
                date_type: date_type
            },
            success: function(res){
                $(".current-time-member").html(res.time_range);
                option2.series[0].data = res.member_count;
                myChart2.setOption(option2);

                option3.series[0].data = res.member_balance;
                myChart3.setOption(option3);

                option4.series[0].data = res.member_point;
                myChart4.setOption(option4);
            }
        });
    }

    var myChart2 = echarts.init(document.getElementById('member_main'));

    option2 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'会员占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '会员占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option2 && myChart2.setOption(option2);

    //环形图-新增会员占比
    var myChart3 = echarts.init(document.getElementById('member_main2'));

    option3 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'余额占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '余额占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option3 && myChart3.setOption(option3);

    var myChart4 = echarts.init(document.getElementById('member_main3'));

    option4 = {
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: '20%',
            left: 'center'
        },
        title:{
            'text':'积分占比',
            'left':'45%',
            'top':'10'
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '积分占比',
                type: 'pie',
                radius: ['20%', '40%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: [

                ]
            }
        ]
    };

    option4 && myChart4.setOption(option4);


    //会员类型走势-余额
    function getMemberTypeConsumeBalanceStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/getMemberTypeConsumeBalanceStatList"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option5.xAxis.data = res.time;
                //option5.series[0].data = res.ordinary_balance;
                option5.series[0].data = res.personal_balance;
                option5.series[1].data = res.store_balance;
                option5.series[2].data = res.staff_balance;
                $(".current-time-member-type-balance").html(res.time_range);
                myChart5.setOption(option5);
            }
        });
    }
    var myChart5 = echarts.init(document.getElementById('member_type_money_main'));
    option5 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['个人会员', '门店会员', '员工会员']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 元'
            }
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '个人会员',
                type: 'bar',
                data: [],
            },
            {
                name: '门店会员',
                type: 'bar',
                data: [],
            },
            {
                name: '员工会员',
                type: 'bar',
                data: [],
            },
        ]
    };
    option5 && myChart5.setOption(option5);

    //会员类型走势-积分
    function getMemberTypeConsumePointStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/getMemberTypeConsumePointStatList"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option6.xAxis.data = res.time;
                option6.series[0].data = res.ordinary_point;
                option6.series[1].data = res.personal_point;
                option6.series[2].data = res.store_point;
                option6.series[3].data = res.staff_point;
                $(".current-time-member-type-point").html(res.time_range);
                myChart6.setOption(option6);
            }
        });
    }
    var myChart6 = echarts.init(document.getElementById('member_type_point_main'));
    option6 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['普通用户', '个人会员', '门店会员', '员工会员']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 积分'
            }
        },
        color:['#44d4c4','#f89c09','#7917fc','#4c75f3'],
        series: [
            {
                name: '普通用户',
                type: 'bar',
                data: [],
            },
            {
                name: '个人会员',
                type: 'bar',
                data: [],
            },
            {
                name: '门店会员',
                type: 'bar',
                data: [],
            },
            {
                name: '员工会员',
                type: 'bar',
                data: [],
            },
        ]
    };
    option6 && myChart6.setOption(option6);


    //会员类型统计
    function getMemberTypeStatChart(date_type){
        $.ajax({
            dataType: 'JSON',
            type: 'POST',
            url: ns.url("admin/stat/membertype"),
            data: {
                date_type: date_type
            },
            success: function(res){
                option7.xAxis.data = res.time;
                option7.series[0].data = res.person_count;
                option7.series[1].data = res.store_count;
                $(".current-time-member-type").html(res.time_range);
                myChart7.setOption(option7);
            }
        });
    }

    var myChart7 = echarts.init(document.getElementById('member_type_main'));
    option7 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: [ '个人会员', '门店会员']
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} 个'
            }
        },
        color:['#f89c09','#7917fc'],
        series: [
            {
                name: '个人会员',
                type: 'bar',
                data: [],
            },
            {
                name: '门店会员',
                type: 'bar',
                data: [],
            },
        ]
    };
    option7 && myChart7.setOption(option7);
</script>
{/block}